<template>
  <div class="container">
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        myChart: null,
      };
    },

    created() {
      const colors = [
        '#24dcf7',
        '#ffdb15',
        '#2B7CB5',
        '#FF6271',
        '#22B2CB',
        '#10e8aa',
        'rgb(233,156,187)',
        'rgb(241,213,100)',
        'rgb(116,216,243)',
        'rgb(55,182,255)',
      ];
      var datas = [
        [
          { name: '数据1', value: 5.6 },
          { name: '数据2', value: 1 },
          { name: '数据3', value: 0.8 },
          { name: '数据4', value: 0.5 },
          { name: '数据5', value: 0.5 },
          { name: '其它', value: 3.8 },
        ],
        [
          { name: '数据1', value: 3.8 },
          { name: '数据2', value: 2.3 },
          { name: '数据3', value: 2.2 },
          { name: '数据4', value: 1.3 },
          { name: '数据5', value: 1.2 },
          { name: '其它', value: 5.7 },
        ],
      ];

      datas.map(data => {
        data.map((item, idx) => {
          item.label = {
            formatter: '{name|{c}}\n{time|{b}}',
            //alignTo: 'edge',
            minMargin: 5,
            edgeDistance: 5,
            lineHeight: 15,
            rich: {
              name: {
                fontSize: 13,
                lineHeight: '20',
                color: colors[idx],
              },
              time: {
                fontSize: 13,
                color: '#eee',
              },
            },
          };
        });
      });
      const option = {
        color: colors,
        series: datas.map(function (data, idx) {
          var left = idx * 50;
          return {
            name: '周',
            type: 'pie',
            radius: [40, 60],
            top: -25,
            left: left + '%',
            width: '50%',
            label: {
              show: true,
            },
            itemStyle: {
              borderColor: '#082d58',
              borderWidth: 2,
              borderRadius: 4,
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            // labelLayout: function (params) {
            //   const isLeft = params.labelRect.x < myChart.getWidth() / 2;
            //   const points = params.labelLinePoints;
            //   // Update the end point.
            //   points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points,
            //   };
            // },
            data: data,
          };
        }),
      };
      this.echartInit(option);
    },

    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import url(./container.scss);
</style>
